<template>
  <div class="wrap">
    <div class="header">
      <i class="wyy wyy-yuanquan"></i>
      <span @click="$router.push('/songlist')">热门推荐</span>
      <ul>
        <li><a href="http://localhost:8888/songlist?cat=华语">华语</a></li><span>|</span>
        <li><a href="http://localhost:8888/songlist?cat=流行">流行</a></li><span>|</span>
        <li><a href="http://localhost:8888/songlist?cat=摇滚">摇滚</a></li><span>|</span>
        <li><a href="http://localhost:8888/songlist?cat=民谣">民谣</a></li><span>|</span>
        <li><a href="http://localhost:8888/songlist?cat=电子">电子</a></li>
      </ul>
      <span class="more" @click="$router.push('/songlist')">
        更多<i class="wyy wyy-jiantou"></i>
      </span>
    </div>
    <div class="hot">
      <ul>
        <li v-for="item in hotList" :key="item.id" @click.prevent="$router.push(`/album/${item.id}`)">
          <SongItem :songPlayList="item"></SongItem>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import SongItem from '@/components/SongItem/index'
import { getHotRecom } from '@/api/recommend'
export default {
  name: 'HotRecommend',
  components: {
    SongItem
  },
  data () {
    return {
      hotList: []
    }
  },
  created () {
    this.getHotRecom()
  },
  methods: {
    async getHotRecom () {
      const res = await getHotRecom({
        limit: 8
      })
      this.hotList = res.data.result
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 0 20px;
  margin: 22px 0 30px 0;
  .header {
    border-bottom: 4px solid #C10D0C;
    .wyy-yuanquan {
      color: #C10D0C;
    }
    span {
      margin-left: 10px;
      font-size: 20px;
      color: #333;
    }
    ul {
      margin-left: 20px;
      font-size: 12px;
      color: #666;
      display: inline-block;
      li {
        display: inline-block;
        border: 0;
      }
      span {
        font-size: 12px;
        color: #666;
        margin: 0 8px;
      }
    }
    .more {
      margin-top: 10px;
      float: right;
      font-size: 12px;
      color: #666;
      i {
        color: #C10D0C;
        font-weight: 600;
        vertical-align: middle;
      }
    }
  }
  .hot {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      li {
        width: 140px;
        height: 200px;
        margin-top: 15px;
      }
    }
  }
}
</style>
